<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <xxx @c-d='handle($event)'></xxx>
        <zzz :object="car"></zzz>
    </div>  
    <script src="./js/vue.js"></script>
    <script>
     Vue.component('xxx',{
        data:()=> {
            return {
                res:'子组件',
                audi:'奥迪A7'
            }
        },
        methods:{
                fn(){
                    this.$emit('c-d',this.audi)
                }
        },
        template:`
                    <button @click="fn">添加</button>
                    `
    })
    Vue.component('zzz',{
        props:['object'],
        data:()=> {
            return {
                res:'子组件',
                audi:'奥迪A7'
            }
        },
        template:`
                  <div>
                    <ul >
                    <li :key="index" v-for="(item,key,index) in object"> {{item.name}} </li>
                    </ul>
                    </div>
                    `
    })

    const ve = new Vue({
        el:'#app',
        data:{
            msg:'hello',
            friuts:[
                'apple',
                'orange',
                'lemon'
            ],
            car:[
                {
                    name:'捷豹'
                },
                {
                    name:'本田'
                },
                {
                    name:'宝马5系'
                }
            ]
        },
        methods:{
            handle(event){
                let obj = {}
                obj.name = event
                this.car.push(obj)
            }
        }
    })
    </script>
</body>
</html>